<template>
    <div id='tmpl'>
        <div id="desc">
            <!--图片详情和缩略图-->
            <div class="title">
                <h4>{{photoinfo.title}}</h4>
                <p>
                    <span>{{photoinfo.add_time | datafmt('YYYY-MM-DD HH:mm:ss')}}</span>
                    <span>{{photoinfo.click}}次浏览量</span>
                </p>
                <hr>
            </div>
            <!--使用mui的九宫格模板-->
            <div class="mui-content">
                <ul class="mui-table-view mui-grid-view mui-grid-9">
                    <li v-for="(item, index) in list" :key='index' class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                            <img class="preview-img" :src="item.src" 
                            height="100" @click="$preview.open(index, list)"></img>
                    </li>
                </ul>
            </div>
            <p>{{photoinfo.content}}</p>
            <!--集成评论组件-->
            <div id="comment">
                <comment :id='id'></comment>
            </div>
        </div>
    </div>
</template>
<script>
//导入评论组件
import comment from '../subcom/comment.vue';

export default {
    components:{
        comment    //注册评论组件
    },
    data() {
        return {
            id:0,    //图片的id
            photoinfo:{},    //图片的详情描述数据对象
            list:[
                // {
                //     src: 'https://placekitten.com/600/400',
                //     w: 600,
                //     h: 400
                //     }, {
                //     src: 'https://placekitten.com/1200/900',
                //     w: 1200,
                //     h: 900
                // }
            ]
        }
    },
    created(){
        this.id = this.$route.params.id;
        this.getimginfo();
        this.getimgs();
    },
    methods:{
        //发送图片详情的ajax请求
        getimginfo(){
            var url = this.$common.apidomain+'/api/getimageInfo/'+this.id;
            this.$http.get(url).then(function(response){
                var data = response.body;
                if(data.status !== 0){
                    this.$tip(data.message);
                    return;
                }
                this.photoinfo = data.message[0];
            })
        },

        //发送缩略图的ajax请求
        getimgs(){
            var url = 'http://182.254.146.100:8899/api/getthumimages/'+this.id;
            this.$http.get(url).then(function(response){
                var data = response.body;
                if(data.status !== 0){
                    this.$tip(data.message);
                    return;
                }
                //由于vue-preview组件要求的数据是{src:w:h:}但是服务器响应回来的数据中是没有w,h的,所以只能自己添加
                data.message.forEach(function(item){
                //如果所有图片都设置为400*400,可能会导致有些图片失真,所以最后按照图片的真实宽高设置
                var img = document.createElement('img');
                img.src = item.src;
                    item.w = img.width;
                    item.h = img.height;
                })
                this.list = data.message;
            })
        }

    }
}
</script>
<style scoped>
#desc {
    padding: 10px;
}

#desc .title h4 {
    color: #00ff94;
}

#desc .title p {
    margin-top: 10px;
    color: rgba(0, 0, 0, 0.4)
}

#desc .title p span:last-of-type {
    margin-left: 20px;
}


/*缩略图样式*/

.mui-content,
.mui-grid-view.mui-grid-9 {
    background-color: #fff;
}

.mui-grid-view.mui-grid-9 .mui-table-view-cell {
    border-right: 1px;
    border-bottom: 1px;
}

.mui-grid-view.mui-grid-9 {
    border: 0px;
}

.mui-content img{
    width: 100px;
    height: 100px;
}

</style>